iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 7
0
Modern Web

Déjà-vu ? 要 Vue 過才知道系列 第 7

Vue.js 簡單實作計數器

  • 分享至 

  • xImage
  •  

明天其實不只明天,也是後天的昨日。

昨天我們雖然只介紹了三個 Vue Directives 的常用內建指令v-text,v-html,v-on,但相信嘛?使用 Vue.js 只要幾個步驟就可以把一個計數器實作出來,使用的情境像是我們在網路購物時的數量控制,

實作時可以先想想哪個部分需要初始化資料(最初顯示在畫面的資料),然後再把事件監聽綁在加號和減號的按鈕上,綁定的方法再處理邏輯(目前的數字加 1 或減 1)就完成了。

我們先來看範例:VueJs_Base_counter

HTML 的部分

<div id="app">
  <!-- 分別在兩個按鈕上監聽、綁定方法 -->
  <input type="button" value="-" v-on:click="decrease" />
    <span>{{count}}</span>
  <input type="button" value="+" v-on:click="increase" />
</div>

JavaScript 的部分:
別忘了以 CDN 的方式將vue.js載入文件裡喔!

const app = new Vue({
  el: '#app',
  data: {
    count: 1,
  },
  methods: {
    // 確認數字比 0 大才可以減
    decrease: function () {
      if (this.count > 0) {
        this.count--;
      } else {
        console.log('out of stock');
      }
    },
    // 加法,最多只能增加到10
    increase: function () {
      // 庫存只有10
      if (this.count < 10) {
        this.count++;
      } else {
        console.log('all sele, out of stock');
      }
    },
  },
});

以往的 JS 原生寫法必須先把 DOM 取到的值抓到再處理,處理完後在塞會去 DOM 裡顯示,但 Vue 只要把變數綁定在元素上,只要資料一改變,元素上的資料也會自動地更新,有沒有很方便?

明天我們再來學習其他的指令喔~

每日一句法文有益身心:À demain ! 阿.ㄉㄜ .嗎! 明天見!


上一篇
Vue Directives 常用的內建指令
下一篇
v- 指令 顯示切換和屬性綁定
系列文
Déjà-vu ? 要 Vue 過才知道30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言